<!DOCTYPE html>
<html>    
    <body>        
        <script type="text/javascript">            
            require
            (
                ["require",
                "lib/bootstrap-switch"],
                function()
                {
                    $('.switch')['bootstrapSwitch']();
                }
            )                    
        </script>

        <!-- Toolbar tabs -->
        <ul class="nav nav-tabs" data-bind="selectedTabBind: selectedTab">
            <li data-bind="visible: selectedTask"><a href="#homeTab" data-toggle="tab">Home</a></li>
            <li><a href="#tasksTab" data-toggle="tab">Tasks</a></li>
        </ul>

        <!-- Tab Content -->
        <div class="tab-content">

            <!-- Draw tab content -->
            <div class="tab-pane active" id="homeTab">

                <div class="container-fluid no-padding">                                                        
                    <ul class="toolbar-group">
                        <li>

                            <div class="inline-block-content">
                                <div class="m-btn-group">                        
                                    <a class="m-btn" title="Add Frame" data-bind="event: {click: addNewFrame}"><i class="icon-plus"></i></a>
                                    <a class="m-btn" title="Remove Frame" data-bind="event: {click: function() {$root.deleteFrame(null);}}"><i class="icon-remove"></i></a>
                                    <a class="m-btn" title="Clone Frame" data-bind="event: {click: function() {$root.cloneFrame(null);}}"><i class="icon-copy"></i></a>
                                </div>

                                <div class="m-btn-group toggle-buttons">
                                    <a class="m-btn active" title="Pen" data-bind="event: {click: selectPenTool}"><i class="icon-pencil"></i></a>
                                    <a class="m-btn" title="Select" data-bind="event: {click: selectSelectionTool}"><i class="icon-edit"></i></a>
                                </div>
                            </div>

                            <div class="switch-button">
                                <div class="switch switch-mini" data-bind="switchBind: showAnnotations">
                                    <input type="checkbox"/>
                                </div>
                                <div class="switch-button-label">
                                    Show Reviews
                                </div>
                            </div>
                           
                            <div>

                                <div class="m-btn-group">
                                    <input type="color" title="Stroke Color" data-bind="value: strokeColor">
                                    <input type="range" title="Stroke Width" data-bind="rangeBind: {value: strokeThickness, min: minStrokeWidth, max: maxStrokeWidth}">
                                </div>

                                <div class="m-btn-group">
                                    <a class="m-btn" title="Add Image" data-bind="event: {click: addImage}"><i class="icon-picture"></i></a>
                                    <a class="m-btn" title="Add Sound" data-bind="event: {click: showAddSoundDialog}"><i class="icon-volume-down"></i></a>
                                </div>
                                                                
                            </div>                                    

                            <div class="toolbar-group-title">
                                Frames
                            </div>

                        </li>

                        <li>

                            <div class="m-btn-group">
                                <a class="m-btn" title="Start" 
                                     data-bind="event: {click: gotoStart}, applyClassBind: {property: isStartDisabled, classes: ['disabled']}">
                                     <i class="icon-step-backward"></i>
                                 </a>
                                <a class="m-btn" title="Previous Frame" 
                                     data-bind="event: {click: gotoPreviousFrame}, applyClassBind: {property: isPreviousDisabled, classes: ['disabled']}">
                                     <i class="icon-backward"></i>
                                 </a>
                                <div class="m-btn-group no-margin">
                                  <a class="m-btn dropdown-carrettoggle" data-toggle="dropdown" 
                                       data-bind="applyClassBind: {property: isPlayDisabled, classes: ['disabled']}">
                                    <i class="icon-play"></i>
                                  </a>
                                  <ul class="m-dropdown-menu">
                                      <li><a data-bind="event: {click: playTask}">Play This Task</a></li>
                                      <li><a data-bind="event: {click: playMovie}">Play Entire Movie</a></li>
                                  </ul>
                                </div>                                        
                                <a class="m-btn" title="Next Frame" 
                                     data-bind="event: {click: gotoNextFrame}, applyClassBind: {property: isNextDisabled, classes: ['disabled']}">
                                     <i class="icon-forward"></i>
                                 </a>
                                <a class="m-btn" title="Last Frame" 
                                    data-bind="event: {click: gotoLastFrame}, applyClassBind: {property: isLastDisabled, classes: ['disabled']}">
                                    <i class="icon-step-forward"></i>
                                </a>
                            </div>

                            <div class="toolbar-group-title">
                                Animation
                            </div>
                        </li>

                        <li>
                            <div class="switch-button">
                                <div class="switch switch-mini" data-bind="switchBind: showReferences">
                                    <input type="checkbox"/>
                                </div>
                                <div class="switch-button-label">
                                    Show References
                                </div>
                            </div>

                            <div class="reference-frames">
                                <div class="reference-thumbnail-list">
                                    <div data-bind="template: {name: 'reference-template', foreach: referenceFrames}"></div>
                                </div>
                            </div>

                            <div class="toolbar-group-title">
                                References
                            </div>

                        </li>
                    </ul>
                    
                </div>                                                    

            </div>

            <!-- Tasks tab -->
            <div class="tab-pane" id="tasksTab">
                
                <div class="container-fluid no-padding">                                                        
                    <ul class="toolbar-group">
                        <li>                        
                            <div class="m-btn-group">                                        
                                <a class="m-btn" title="Add Task" data-bind="event: {click: showAddNewTaskDialog}"><i class="icon-plus"></i></a>
                                <a class="m-btn" title="Remove Task" data-bind="event: {click: deleteTask}"><i class="icon-remove"></i></a>
                            </div>

                            <div class="toolbar-group-title">
                                Tasks
                            </div>
                        </li>
                    </ul>
                </div>

            </div>
        </div>

        <script type="text/html" id="reference-template">

            <div class="reference-thumbnail"
                    data-bind="shapesBind: shapes"
                    data-target=".reference-thumbnail-context-menu"
                    data-toggle="context">

                <!-- Reference thumbnail context menu -->
                <div class="reference-thumbnail-context-menu">
                    <ul class="dropdown-menu" role="menu">
                        <li><a data-bind="event: {click: $root.deleteFrameReference}">Remove Reference</a></li>                        
                    </ul>
                </div>

                <div class="thumbnail-svg-container">
                    <svg xmlns="http://www.w3.org/2000/svg" 
                             xmlns:xlink="http://www.w3.org/1999/xlink"
                             version="1.1"
                             width="80"
                             height="60"
                             viewBox="0 0 2000 1500">                         
                    </svg>
                </div>
            </div>
        </script>
        <script src="Client/lib/m-radio.js"></script>
    </body>    
</html>